<template>
  <div class="base__table">
    <div class="base__table-panel">
      <div class="base__table-title">
        <div class="text">会员列表</div>
        <div class="actions">
        </div>
      </div>
      
      <base-search ref="baseSearch" :formList="searchFormList" @search="search"></base-search>
  
      <el-table :data="tableData" v-loading="tableLoading" cell-style="font-weight: 700;" header-row-style="font-weight: 700;" tooltip-effect="dark">
        <el-table-column label="用户ID" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="realName"></el-table-column>
        <el-table-column label="性别" prop="gender">
          <template slot-scope="{ row }">
            {{ transformDisplayName(dict_productionType, row.gender) }}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="邮箱地址" prop="email"></el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="用户状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" >正常</el-tag>
              <el-tag v-else size="small" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
          <template slot-scope="scope">
            <table-action-item v-if="scope.row.status == 0" title="锁定"  @takeAction="unEnableUser(scope.row)" class="el-icon-lock"></table-action-item>
            <table-action-item v-else title="启用" class="el-icon-unlock" @takeAction="enableUser(scope.row)"></table-action-item>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>

    </div>
  </div>
</template>


<script>

import { transformDisplayName, dict_productionType,dict_userStatus } from '@/utils/dictionary'
import { format_null, format_dateTime } from '@/utils/formatter'

import BaseSearch from '@/components/BaseSearch'
import TableAction from '@/components/table-action/TableAction'
import TableActionItem from '@/components/table-action/TableActionItem'

import Create from './Create' 
import Edit from './Edit'

import { listApi,enableUserStatusApi } from '@/api/modules/member/list'

export default {
  name: 'WarehouseTable',
  components: {
    BaseSearch,
    TableAction,
    TableActionItem
  },
  data () {
    return {
      dict_productionType,
      dict_userStatus,
      
      searchFormList: [
        { label: '用户名', prop: 'username', type: 'text' },
        { label: '真实姓名', prop: 'realName', type: 'text' },
        { label: '用户性别', prop: 'gender', type: 'select', options: dict_productionType },
        { label: '状态', prop: 'status', type: 'select', options: dict_userStatus },
      ],
      searchForm: {
        orderCode: null,
        batch: null,
        recipient: null,
        date: null
      },

      tableData: [],
      tableLoading: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },

      currentGetDeviceNum: 1,
      currentGetDeviceNumMax: 1,

    }
  },
  methods: {
    format_dateTime,
    transformDisplayName,

    
    search(formData) {
      this.pageInfo.pageNum = 1
      this.searchForm = { ...formData }
      this.getList()
    },
    async getList() {
      try {

        this.tableLoading = true

        const params = {
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.searchForm
        }
        const res = await listApi(params)

        const { list, total } = res.data
        
        // TODO：暂时手动添加数量，后期需要后端补充
        this.tableData = format_null(list.map(item => ({...item, amount: Math.floor(Math.random() * 10)})))

        this.pageInfo.total = total

      } catch (err) {
        console.error(err)
      }
      this.tableLoading = false

    },
    handlePageSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
    handlePageNumChange(pageNum) {
      this.pageInfo.pageNum = pageNum
      this.getList()
    },


    handleShowGetDevice (row) {
      const { amount } = row
      this.currentGetDeviceNumMax = amount
    },
    handleHideGetDevice () {
      this.currentGetDeviceNum = 1
    },
    async handleConfirmGetDevice (row) {
      const { name, code } = row
      try {
        await this.$confirm(
          `你确定要取出${ this.currentGetDeviceNum }件【${ name }】吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        const params = { code, count: this.currentGetDeviceNum }
        await getDeviceApi(params)
        this.$message({
          type: 'success',
          message: '出库成功'
        })
        this.getList()
      } catch (err) {
        console.error(err)
      }
    },
    //禁用
    async unEnableUser (row) {
      
      const { id } = row
      try {
        await this.$confirm(
          `你确定要禁用该用户吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        const params = { id,status:1 }
        
        await enableUserStatusApi(params)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.getList()
      } catch (err) {
        console.error(err)
      }
    },
    //启用
    async enableUser (row) {
      const { status, id } = row
      try {
        await this.$confirm(
          `你确定要启用该用户吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        const params = { id,status:0 }
        
        await enableUserStatusApi(params)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.getList()
      } catch (err) {
        console.error(err)
      }
    }
    

  },
  mounted() {
    this.getList()
  }
}
</script>


<style lang="less" scoped>
@import '../../../styles/tablePanel.less';

.getDevice__action {
  .icon-device-out {
    cursor: pointer;
  }

}

</style>